<template>
  <div class="message-container" :class="msg.type">
    <div v-if="msg.type === 'bot'">
      <img :src="avatar" alt="Bot" class="avatar" />
    </div>
    <div :class="['message-content', msg.type === 'user' ? 'user-message-content' : 'bot-message-content']">
      <div>{{ msg.content }}</div>
    </div>
    <div v-if="msg.type === 'user'">
      <img :src="avatar" alt="User" class="avatar" />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    msg: {
      type: Object,
      required: true
    },
    avatar: {
      type: String,
      required: true
    }
  }
};
</script>

<style scoped>
.message-container {
  display: flex;
  align-items: center;
  margin: 10px 0;
}

.avatar {
  border-radius: 50%;
  margin: 0 10px;
  width: 50px;
  height: 50px;
}

.user-message-content {
  background-color: #d1e7dd; /* 用户消息背景 */
  border-radius: 10px;
  padding: 10px;
  max-width: 80%;
  align-self: flex-end; /* 用户消息右对齐 */
}

.bot-message-content {
  background-color: #cfe2ff; /* 机器人消息背景 */
  border-radius: 10px;
  padding: 10px;
  max-width: 80%;
  align-self: flex-start; /* 机器人消息左对齐 */
}
</style>
